import * as THREE from 'three'
import '../base/index.css'
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

// import { City } from './city'
export const initCity = () => {
  //    1.获取canvas元素
  const canvas = document.getElementById('webgl')
  console.log(canvas)
  //    2.构建场景
  const scene = new THREE.Scene()
  //    3.构建相机
  const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 100000)
  camera.position.set(6, 166, 176)
  //   让相机朝向场景原点，确保视角正确
  camera.lookAt(0, 0, 0)
  scene.add(camera)
  //    5.添加光照
  //   添加环境光
  scene.add(new THREE.AmbientLight(0xadadad))
  const directionLight = new THREE.DirectionalLight(0xffffff)
  directionLight.position.set(0, 0, 0)
  scene.add(directionLight)

  //     4.创建渲染器
  // 创建渲染器
  const renderer = new THREE.WebGLRenderer({ canvas })
  renderer.setSize(window.innerWidth, window.innerHeight)
  // 设置像素比
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
  // 设置场景颜色
  renderer.setClearColor(new THREE.Color(0x000000), 1)
  scene.background = new THREE.Color(0x000000)
  // 初始渲染场景S
  //   8.fbx文件：城市模型
  var fbxLoader = new FBXLoader()
  fbxLoader.load('../../public/model/beijing.fbx', obj => {
    scene.add(obj)
    // 看不见模型的时候缩小
    obj.scale.set(0.15, 0.1, 0.1)
    console.log(obj)
    // 渲染函数，用于在加载后重新渲染场景

    render() // 初次加载后立即渲染一次
  })
  function render() {
    requestAnimationFrame(render)
    controls.update()
    // 在这里可以更新场景中的动画或其他内容

    renderer.render(scene, camera) // 渲染场景
  }
  // 9.9设置相机控件轨道控制器OrbitControls
  const controls = new OrbitControls(camera, canvas)
  // 设置最大距离
  controls.maxDistance = 600
  controls.enableDamping = true
  // 10.浏览器控制台查看相机位置变化：可以自己调节
  controls.addEventListener('change', function () {
    console.log('camera.position', camera.position)
  })

  renderer.render(scene, camera)
  //     7.弹性Canvas随着窗口变化
  window.addEventListener('resize', () => {
    // 在窗口大小改变时执行的代码
    const width = window.innerWidth
    const height = window.innerHeight
    // 1.更新宽高比
    camera.aspect = width / height
    // 2.更新相机的投影矩阵
    camera.updateProjectionMatrix()

    //尺寸(像素px)
    renderer.setSize(window.innerWidth, window.innerHeight)
    // 获取你屏幕对应的设备像素比.devicePixelRatio告诉threejs,以免渲染模糊问题
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
    // 重新渲染
    // renderer.render(scene, camera)
  })
}
